@import url(../css/base.css);

@bgf: #fff;
@bgfa: #fafafa;
@gray: gray;
@wh100: 100%;
@ft14: .14rem;
@h44: .44rem;
@fw7: 700;
@ft16: .16rem;
@px100: 1rem;
@px30: .3rem;
@m0a: 0 auto;



::-webkit-scrollbar-track-piece {
  background: #d3dce6;
}

::-webkit-scrollbar {
  width: .03rem;
}

::-webkit-scrollbar-thumb {
  background: #99a9bf;
  border-radius: .2rem;
}

.page-bd {
  background-color: @bgfa;

  .hbar {
    height: @h44;
  }

  .car-top-menu {
    .flex();
    padding: .02rem .16rem;
    height: @h44;
    font-size: .15rem;

    .total-goods {
      color: red;
    }

    .top-menu-edit i {
      font-size: .15rem;
      margin-right: .06rem;
    }
  }

  .page-header-wrap {
    height: @h44;
    .flexc;
    background-color: @bgf;
    font-size: @ft16;
    font-weight: @fw7;
    .ove;
    .fixedTop;
  }

  ;

}

.goods-list li {
  display: flex;
  background: #fff;
  border-radius: .06rem;
  display: flex;
  align-items: center;
  padding: .16rem .08rem;
  margin-bottom: .13rem;
}

.goods-list li>div:first-child {
  margin-right: .05rem;
  width: .33rem;
  height: .44rem;
  line-height: .44rem;

  input {
    transform: scale(.4);
  }
}

.goods-list li>div:nth-child(2) {
  width: 1.1rem;
  height: 1.1rem;

  img {
    width: 1.1rem;
  }
}

.goods-list li>div:last-child {
  display: flex;
  flex-direction: column;
  padding-left: .13rem;
  flex: 1;

  h3 {
    font-weight: 400;
    font-size: .15rem;
    max-height: .41rem;
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .goods-props {
    margin-top: .07rem;
    height: .22rem;
    color: #ababab;
    font-size: .13rem;
    overflow: hidden;
  }
}

.goods-list li>div:last-child>.goods-price {
  display: flex;
  margin-top: .13rem;
  justify-content: space-between;

  span {
    font-size: .16rem;
    color: red;
  }
}

.goods-list li>div:last-child>div .goods-num-menu {
  display: flex;

  input {
    margin: 0.03rem;
    width: .44rem;
    height: .27rem;
    background: rgb(242, 243, 245);
    font-size: .14rem;
    color: #333;
    text-align: center;
  }

  button {
    width: .33rem;
    height: .27rem;
    text-align: center;
    line-height: .27rem;
    font-size: .2rem;
    color: #323233;
    background: #f2f3f5;
    border: none;
  }
}

.car-goods-footer-fixed {
  position: fixed;
  bottom: .5rem;
  left: 0;
  right: 0;
  z-index: 11;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: .52rem;
  background: #fff;
  padding: 0 .16rem;
  border-bottom: 1px solid #eee;

  .all-check,
  .go-pay {
    display: flex;
    font-size: .16rem;
    align-items: center;
  }

  .all-check {
    width: .77rem;
    align-items: center;

    input {
      width: .2rem;
      transform: scale(1.05);
    }
  }

  .go-pay {
    div {
      display: flex;
      height: 100%;
      align-items: center;
      font-size: .14rem;

      span {
        font-size: .17rem;
        color: red;
      }
    }

    a {
      margin-left: .16rem;
      width: 1.1rem;
      font-size: .15rem;
      height: .39rem;
      line-height: .39rem;
      text-align: center;
      color: #fff;
      border-radius: .27rem;
      background: linear-gradient(90deg, #f9211c, #ff6335)
    }
  }
}

.car-cont {
  padding: @px100 @px30;
  // margin-top: @h44;
  .flexc;
  flex-direction: column;

  .empty-img {
    width: 1.5rem;
    height: 1rem;
    .flexc;

    img {
      width: @wh100;
    }
  }

  .empty-txt {
    font-size: @ft16;
    margin: .3rem 0;
    color: @gray;
  }

  .go-index {
    width: 1.2rem;
    margin: @m0a;
    font-size: @ft16;
    height: .35rem;
    line-height: .35rem;
    text-align: center;
    border-radius: .27rem;
    background: linear-gradient(90deg, #f9211c, #ff6335);

    a {
      color: @bgf;
    }
  }
}

.page-body-cont {
  padding-top: @h44;
  height: calc(100% - .5rem);

  .cont-main {
    height: calc(100% - .5rem);
  }

  .search-bar {
    .fixedTop();
    .flexc;
    top: @h44;
    height: .53rem;
    padding: .07rem;
    padding-bottom: .11rem;
    background-color: @bgf;

    a {
      width: @wh100;
      height: @wh100;
      background-color: #f7f7f7;
      border-radius: .27rem;
      .flexc();
      color: #6d6d6d;
      font-size: @ft14;

      i {
        margin-right: .07rem;
      }

      span {
        font-size: @ft16;
      }
    }
  }

  .cate-cont {
    margin-top: .53rem;
    display: flex;
    flex: 1;
    background-color: @bgf;
    height: @wh100;
    align-items: inherit;

    .cate-list-nav-items {
      width: @wh100;
      height: @wh100;
      display: flex;
      flex-direction: column;
      flex: 0 0 23%;
      background: #f8f8f8;
      color: #444;

      .cate-nav-scroll {
        height: 100%;
        overflow-y: auto;

        .cate-list-nav-item {
          position: relative;
          height: .49rem;
          z-index: 10;
          display: block;
          font-size: .15rem;
          .flexc();
        }

        .cate-list-nav-item.active {
          background-color: @bgf;
          color: red;
        }
      }
    }

    .cate-list-goods-items {
      overflow: hidden;
      width: @wh100;
      height: @wh100;

      .cate-list-goods-scroll {
        display: flex;
        flex-flow: row wrap;
        align-content: flex-start;
        height: @wh100;
        overflow-y: auto;

        .cate-list-goods-cont {
          display: flex;
          flex-wrap: wrap;
          width: @wh100;
          padding: 0 .1rem;
          padding-top: .1rem;
          padding-bottom: .05rem;
          margin-bottom: .16rem;
          background-color: @bgf;

        }

      }
    }

  }
}

.cate-list-goods-item {
  width: 33.33%;

  .cate-goods-item-img {
    .flexc();
    padding: .08rem .08rem .02rem .08rem;
    width: @wh100;

    img {
      width: @wh100;
    }
  }

  .cate-goods-item-name {
    .ove;
    display: block;
    padding-bottom: .16rem;
    text-align: center;
    font-size: @ft14;
    color: #444;
  }
}

.fixedTop() {
  position: fixed;
  left: 0;
  top: 0;
  width: @wh100;
  background-color: @bgf;
  height: @h44;
  z-index: 1000;
}

.ove() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

//两行省略
.twoEllipsis() {
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.flex() {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flexc() {
  display: flex;
  align-items: center;
  justify-content: center;
}